<template>
    <div>
        <slidebar></slidebar>
		<div class="layui-body" style="padding-top:70px;">
			<span class="layui-breadcrumb" style="visibility: visible;margin-left: 30px;">
			  <a href="javascript:;"><router-link to="">用户管理</router-link></a>
			  <span lay-separator="">/</span>
			  <a href="javascript:;"><router-link to="">用户列表</router-link></a>
			  <span lay-separator="">/</span>
			  <a href="javascript:;">查看详情</a>
			</span>
			<div style="padding: 20px 30px;border-top: 1px solid #F0F0F0;">
			    <table class="layui-table"  lay-skin="nob">
				  <tbody>
				    <tr>
				      <td><img src="" alt="" />HY。</td>
				    </tr>
				    <tr>
				      <td><span>收货地址：</span>浙江省杭州市江干区</td>
				    </tr>
				    <tr>
				      <td><span>关注：</span>11<span style="margin-left: 50px;">粉丝：</span>23</td>
				    </tr>
				  </tbody>
				</table> 
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				  <ul class="layui-tab-title">
				    <li class="layui-this">参与活动(14)</li>
				    <li>我的关注(14)</li>
				    <li>我的粉丝(14)</li>
				    <li>获奖记录(14)</li>
				  </ul>
				  <div class="layui-tab-content" style="height: 100px;">
				    <div class="layui-tab-item layui-show">
				    	<table class="layui-table" >
						  	<thead>
							    <tr>
							      <th>活动图片</th>
							      <th>活动话题</th>
							      <th>活动奖品</th>
							      <th>转发次数</th>
							      <th>已获点赞</th>
							      <th>活动状态</th>
							      <th>中奖人</th>
							    </tr>
							</thead>
							<tbody>
						    	<tr v-for="">
							      <td><img src="" alt="" />图片</td>
							      <td>话题话题话题话题</td>
							      <td>奖品</td>
							      <td>88</td>
							      <td @click="Detail" class="Detail"><img src="" alt="" />12</td>
							      <td>进行中</td>
							      <td>HY</td>
						    	</tr>
						   </tbody>
						</table>
						<div id="demo1" style="float: right;"></div>
				    </div>
				    <div class="layui-tab-item">
				    	<table class="layui-table" >
						  	<thead>
							    <tr>
							      <th>名称</th>
							      <th>关注时间</th>
							      <th>操作</th>
							    </tr>
							</thead>
							<tbody>
						    	<tr v-for="">
							      <td>HY</td>
							      <td>2018.11.11</td>
							      <td class="caozuo">
							      	<a class="edit" href="javascript:;">查看</a>
							      </td>
						    	</tr>
						   </tbody>
						</table>
						<div id="demo2" style="float: right;"></div>
				    </div>
				    <div class="layui-tab-item">
				    	<table class="layui-table" >
						  	<thead>
							    <tr>
							      <th>名称</th>
							      <th>关注时间</th>
							      <th>操作</th>
							    </tr>
							</thead>
							<tbody>
						    	<tr v-for="">
							      <td>HY</td>
							      <td>2018.11.11</td>
							      <td class="caozuo">
							      	<a class="edit" href="javascript:;">查看</a>
							      </td>
						    	</tr>
						   </tbody>
						</table>
						<div id="demo3" style="float: right;"></div>
				    </div>
				    <div class="layui-tab-item">
				    	<table class="layui-table" >
						  	<thead>
							    <tr>
							      <th>活动图片</th>
							      <th>活动话题</th>
							      <th>活动奖品</th>
							      <th>转发次数</th>
							      <th>已获点赞</th>
							      <th>活动状态</th>
							      <th>中奖人</th>
							    </tr>
							</thead>
							<tbody>
						    	<tr v-for="">
							      <td><img src="" alt="" />图片</td>
							      <td>话题话题话题话题</td>
							      <td>奖品</td>
							      <td>88</td>
							      <td @click="Detail" class="Detail"><img src="" alt="" />12</td>
							      <td>进行中</td>
							      <td>HY</td>
						    	</tr>
						   </tbody>
						</table>
						<div id="demo4" style="float: right;"></div>
				    </div>
				  </div>
				</div> 
			</div>
		</div>
    </div>
</template>
<script>
import slidebar from '../components/slidebar'
export default {
  name: '',
  data () {
    return {
      xixi:123132132,
      activityList:[],//活动列表
    }
  },
  components:{
      slidebar:slidebar
  },
  created(){
  	var that = this
  	that.$axios.get('/apis/web/v1/admin/activity/list',{params:{}}).then((res)=>{
		console.log(res)
		if(res.data.errCode == 0){
			if(res.data.data.data){
				that.activityList = []
				for(var i=0;i<res.data.data.data.length;i++){
					that.activityList.push(res.data.data.data[i])
				}
			}
			layui.laypage.render({
			    elem: 'demo1'
			    ,count: res.data.data.to //数据总数
			    ,jump: function(obj){
			      	console.log(obj)
			      	that.$axios.get('/apis/web/v1/admin/activity/list',{params:{page:obj.curr}}).then((res)=>{
						console.log(res)
						that.activityList = []
						if(res.data.data.data){
							for(var i=0;i<res.data.data.data.length;i++){
								that.activityList.push(res.data.data.data[i])
							}
						}
					})
			    }
			});
		}
	})
  },
  methods:{
  	del:function(index){
  		console.log(index,'index')
  		var that = this; 
  		layer.open({
		  content: '确定删除这个活动？'
		  ,btn: ['确定', '取消']
		  ,yes: function(index, layero){
		    console.log(that.$axios)
	      	that.$axios.get('/apis/admin/activity/list',{params:{

			}}).then((res)=>{
				console.log(res)
				layer.closeAll();
			})
		  }
		  ,btn2: function(index, layero){
		  }
		  ,cancel: function(){ 
		    //右上角关闭回调
		    //return false 开启该代码可禁止点击该按钮关闭
		  }
		});
  	},
  	Detail:function(){
  		var that = this
  		layer.open({
        type: 1
        ,title: '点赞详情' //标题栏
        ,closeBtn: false
        ,area: '400px;'
        ,shade: 0.5
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        ,btn: ['确定']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><img src="" alt="" />' + that.xixi +'</div>'
        ,success: function(layero){
        }
      });
  	}
  }
}

</script>
<style type="text/css">
	.caozuo a{
		color: #01AAED;
		cursor: pointer;
	}
	.caozuo a:hover{
		color: #666666;
		cursor: pointer;
	}
	.layui-table span{
		color: #009587;
	}
	tr:hover{
		background: #fff!important;
	}
	td:hover{
		background: #fff;
	}
	.Detail{
		cursor: pointer;
	}
	.Detail:hover{
		background: #f1f1f1;
	}
</style>
